import React from 'react';
import { LeftOutlined } from '@ant-design/icons';
import { Dropdown } from 'antd-mobile';
import { Tabs } from 'antd';
import img1 from './shipu.jpg'
import { useNavigate } from 'react-router-dom';

const onChange = (key) => {
    console.log(key);
};
const items = [
    {
        key: '1',
        label: '早餐',
    },
    {
        key: '2',
        label: '中餐',
    },
    {
        key: '3',
        label: '晚餐',
    },
];

const list = [
    {
        id: 1,
        img: 'https://img0.baidu.com/it/u=163584069,1926638615&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
        title: '五谷杂粮粥',
        jian: '茄子50g+猪肉20g',
        shuoming: '营养健康',
        price: '￥6.00',
        cate: '早餐',
        biaoqian: '荤菜'
    },
    {
        id: 2,
        img: 'https://img0.baidu.com/it/u=2538027244,170930836&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1200',
        title: '杂粮馒头',
        jian: '面粉',
        shuoming: '营养健康',
        price: '￥1.00',
        cate: '早餐',
        biaoqian: '杂粮'
    },
    {
        id: 3,
        img: 'https://img0.baidu.com/it/u=2538027244,170930836&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1200',
        title: '杂粮馒头',
        jian: '面粉',
        shuoming: '营养健康',
        price: '￥1.00',
        cate: '早餐',
        biaoqian: '杂粮'
    },
    {
        id: 4,
        img: 'https://img1.baidu.com/it/u=1944804911,4182732910&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
        title: '红烧排骨',
        jian: '排骨50g',
        shuoming: '荤素搭配、营养健康',
        price: '￥101.00',
        cate: '中餐',
        biaoqian: '荤菜'
    },
    {
        id: 5,
        img: 'https://img1.baidu.com/it/u=2727207867,575733802&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=600',
        title: '五谷杂粮粥',
        jian: '茄子50g+猪肉20g',
        shuoming: '营养健康',
        price: '￥6.00',
        cate: '中餐',
        biaoqian: '荤菜'
    },
    {
        id: 6,
        img: 'https://img1.baidu.com/it/u=3738453434,1171849201&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667',
        title: '紫菜蛋花汤',
        jian: '紫菜10g+鸡蛋15g+香菜10g',
        shuoming: '荤素搭配、营养健康',
        price: '￥6.00',
        cate: '中餐',
        biaoqian: '荤菜'
    },
];

const renderListByCategory = (category) => {
    const filteredList = list.filter((item) => item.cate.includes(category));
    if (category === '晚餐' && filteredList.length === 0) {
        return <div style={{marginTop:'120px',textAlign:'center'}}>
            <img src={img1} alt=''/>
            <p style={{color:'#6670a1'}}>还未发布</p>
            <button 
                style={{
                    backgroundColor:'#82d693',
                    color:'white',
                    fontWeight:'bold',
                    width:'120px',
                    border:'none',
                    height:'45px',
                    borderRadius:'20px',
                    marginTop:'25px'
                }}
                >提醒</button>
        </div>  
    }
    return filteredList.map((item) => (
        <div
            key={item.id}
            style={{
                display: 'flex',
                alignItems: 'center',
                marginBottom: '10px',
                padding:'15px'
            }}
        >
            <img
                src={item.img}
                alt={item.title}
                style={{
                    width: '100px',
                    height: '100px',
                    objectFit: 'cover',
                    marginRight: '20px',
                    borderRadius: '5px'
                }}
            />
            <div>
                <h3>
                    {item.title}
                    {/* 添加标签 */}
                    <span style={{ backgroundColor: '#fbf2dd', padding: '2px 6px', borderRadius: '3px', marginLeft: '10px', color: '#fdbe99' }}>{item.biaoqian}</span>
                </h3>
                <p>{item.jian}</p>
                <p>{item.shuoming}</p>
                <p style={{ color: '#ffbb29', fontSize: '18px' }}>{item.price}</p>
            </div>
        </div>
    ));
};

export default function StudentShiPu() {
    const navigate = useNavigate();
    return (
        <div style={{ padding: '15px' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
                <LeftOutlined onClick={() => navigate("/index/home")}/>
                <div style={{ width: '100%', textAlign: 'center' }}>
                    <h3>学生食谱</h3>
                </div>
            </div>
            <hr style={{ marginTop: '10px' }} />
            <div>
                <Dropdown>
                    <Dropdown.Item key="sorter" title="2023年秋季">
                        <div style={{ padding: 12 }}>2023年秋季</div>
                    </Dropdown.Item>
                    <Dropdown.Item key="bizop" title="2023-11">
                        <div style={{ padding: 12 }}>2023-11</div>
                    </Dropdown.Item>
                </Dropdown>
            </div>
            <div>
                <Tabs
                    defaultActiveKey="1"
                    items={items.map((item) => ({
                        ...item,
                        children: renderListByCategory(item.label),
                    }))}
                    onChange={onChange}
                />
            </div>
        </div>
    );
}    